<template>
    <el-card class="box-card" :body-style="{ height: '100%' }">
        <template #header>
            <div class="card-header">
                <div>
                    <div class="colorBar"></div>
                    <div>{{ title.text }}</div>
                </div>
                <div class="legendData">
                    <template>
                        <div>
                            <div class="liColor">
                            </div>
                            <div>
                                asdas
                            </div>
                        </div>
                    </template>
                </div>
                <div>
                    <el-button type="primary" @click="updateChartComType('currentDay')">日</el-button>
                    <el-button type="primary" @click="updateChartComType('currentWeek')">周</el-button>
                    <el-button type="primary" @click="updateChartComType('currentMonth')">月</el-button>
                </div>
            </div>
        </template>
        <div id="rank" style="width: 100%; height: 500px"></div>
    </el-card>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive } from 'vue';
import { userDashoardDayRankApi } from '@/services/dashoard'
import { deepCopy } from '@/utils/Tools/deepCopy';
type Series = {
    name: string;
    type: string;
    stack: string;
    data: number[];
};

type ChartData = {
    series: Series[];
};
type yAxis = {
    type: 'category';
    data: number[];
};

type ChartOptions = {
    yAxis: yAxis;
};
onMounted(async () => {
    let retdayrank = await userDashoardDayRankApi()
    changedata(retdayrank.data)
});

const title = reactive({ text: '销售排行 ' });
const updateChartCom = (myChart: echarts.ECharts) => {
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: echartyAxisrank.yAxis,
        series: echartserierank.series
    })
}

const echartserierank = reactive<ChartData>({
    "series": []
})
const echartyAxisrank = reactive<ChartOptions>({
    yAxis: {
        type: 'category',
        data: []
    },
})
let deepEchartRankDate = reactive<any>({})
const updateChartComType = async (value: string) => {
    switch (value) {
        case "currentDay":
            let retdayrank = await userDashoardDayRankApi()
            changedata(retdayrank.data)
            break;
        case "currentWeek":
            let retweekrank = await userDashoardDayRankApi()
            changedata(retweekrank.data)
            break;
        case "currentMonth":
            let retmonthrank = await userDashoardDayRankApi()
            changedata(retmonthrank.data)
            break;
    }
}
const changedata = (value: any) => {
    deepEchartRankDate.value = deepCopy(value)
    echartserierank.series = deepEchartRankDate.value.series
    echartyAxisrank.yAxis = deepEchartRankDate.value.yAxis
    var mYChart = echarts.init(document.getElementById('rank'));
    updateChartCom(mYChart);
}

</script>
  
<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    width: 100%;

    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-self: center;

        div {
            display: flex;
            justify-content: space-between;
            align-self: center;
        }

        .card-header {
            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }

            li {
                float: left;
            }

            .legendData {
                cursor: pointer;
            }

            .liColor {
                width: 20px;
                height: 10px;
                // background-color: red;
                cursor: pointer;
                margin: 0 10px;
            }
        }
    }


}

.el-card__body {
    height: 100%;
}
</style>
  